<template lang="pug">
.detail
  .detail-header
    .iconfont.icon-back(@click="$router.back()")
    .detail-header-title 找材料详情
  .detail-content
    .detail-section
      .detail-section-title 基本信息
      .detail-section-bd.background
        .detail-section-flex
          .detail-col
            .detail-item
              .detail-item-label 需求名称
              .detail-item-value {{detail.postContent.baseInfo.demandName}}
            .detail-item
              .detail-item-label 项目业态
              .detail-item-value.flex
                .tag-item(v-for="item in detail.postContent.baseInfo.styleList") {{item.styleName}}
            .detail-item
              .detail-item-label 项目规格
              .detail-item-value {{detail.postContent.baseInfo.projectScale}}
            .detail-item
              .detail-item-label 采购预算
              .detail-item-value {{detail.postContent.baseInfo.lowPrice}}~{{detail.postContent.baseInfo.highPrice}}
            .detail-item
              .detail-item-label 联系电话
              .detail-item-value  {{detail.postContent.baseInfo.contactPhone}}
          .detail-col
            .detail-item
              .detail-item-label 所属项目
              .detail-item-value {{detail.postContent.baseInfo.projectName}}
            .detail-item
              .detail-item-label 需求分类
              .detail-item-value {{detail.postContent.baseInfo.demandParentCategory}}
            .detail-item
              .detail-item-label 采购数量
              .detail-item-value {{detail.postContent.baseInfo.demandNums}}
            .detail-item
              .detail-item-label 联系人
              .detail-item-value {{detail.postContent.baseInfo.contactPerson}}
        .detail-section-ft
          .detail-item-label 需求描述
          .detail-item-value {{detail.postContent.baseInfo.demandDescription}}
    .detail-section.detail-section-imgs
      .detail-section-title
        span 材料主图
        .section-title-line
      .detail-section-bd
        .detail-section-flex
          .detail-image-item(v-for="item in detail.postImg", :style="item.fileUrl | filterUrl")
    .detail-footer(v-if="detail.postContent.baseInfo.reviewStatus == 1")
      el-button(size="small" name="info" @click="refuse") 审核拒绝
      el-button(size="small" type="primary" @click="agree") 审核通过
</template>

<script>
import { getPostDetails, auditFindMaterials } from 'api'
export default {
  name: 'findMaterialDetail',
  data () {
    return {
      detail: {
        postContent: {
          baseInfo: {},
          projectTypeArray: []
        },
        postImg: []
      }
    }
  },
  methods: {
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getPostDetails, { postId: this.$route.params.id })
        this.detail = ResultSet.userData
      } catch (err) {
        this.$message.error(err)
      }
    },
    agree (row) {
      this.$confirm('是否审核通过该材料？', '审核通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(async () => {
        try {
          console.log(row)
          await this.$axios.post(auditFindMaterials, { idList: this.detail.postContent.baseInfo.id + '', status: 2 })
          this.$message.success('审核成功！')
          this.getDetail()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    refuse (row) {
      this.$confirm('是否拒绝所选材料？', '审核失败', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await this.$axios.post(auditFindMaterials, { idList: this.detail.postContent.baseInfo.id + '', status: 3 })
          this.$message.success('审核成功！')
          this.getDetail()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.detail {
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
  min-height: 100%;
}
.detail-header {
  padding: 23px 40px;
  border-bottom: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 24px;
    color: #B2B4C7;
    margin-right: 12px;
    cursor: pointer;
  }
  .detail-header-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    color: #3E4373;
  }
}
.detail-content {
  position: relative;
  padding: 32px 40px 0;
}
.detail-section-title {
  position: relative;
  padding-left: 12px;
  font-weight: bold;
  font-size: 18px;
  line-height: 26px;
  color: #B2B4C7;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    background: #B2B4C7;
    border-radius: 8px;
  }
  span {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #fff;
    padding: 0 8px 0 0;
  }
  .section-title-line {
    width: 100%;
    height: 1px;
    background: #EDEDED;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
.detail-section-bd {
  width: 100%;
  margin-top: 16px;
  padding: 24px;
  border-radius: 6px;
  &.background {
    background: #F6F6F9;
  }
  .detail-section-flex {
    display: flex;
  }
  .detail-col {
    width: 33.333%;
  }
  .detail-item {
    margin-bottom: 24px;
  }
}
.detail-item-label {
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
  margin-bottom: 4px;
}
.detail-item-value {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
  &.flex {
    display: flex;
    flex-wrap: wrap;
  }
}
.tag-item {
  padding: 1px 10px;
  background: rgba(134, 118, 255, 0.1);
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  color: #64698F;
  margin-right: 4px;
  margin-bottom: 4px;
}
.detail-section-ft {
  .detail-item-value {
    width: 66.66%;
  }
}
.detail-section-imgs {
  margin-top: 40px;
}
.detail-image-item {
  width: 240px;
  height: 180px;
  border-radius: 6px 6px 0px 0px;
  margin-right: 16px;
  margin-bottom: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.detail-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 60px;
}
</style>
